<template>
  <div class="menuList">
    <el-tree :data="data" :props="defaultProps" default-expand-all>
      <div class="custom-tree-node" slot-scope="{ data }">
          <i v-if="data.img" :class="data.img"></i>
          <span>{{ data.name }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => edit(data)">
              编辑
            </el-button>
            <!-- 一级菜单才能添加子菜单 -->
            <el-button
              v-if="data.level == 1"
              type="text"
              size="mini"
              @click="() => add(data)">
              添加子菜单
            </el-button>
            <!-- 当菜单没有子菜单的时候才能进行删除 -->
            <el-button
              v-if="data.children.length == 0"
              type="text"
              size="mini"
              @click="() => remove(data)">
              删除
            </el-button>
          </span>
        </div>
    </el-tree>
    <div>
      <el-button
        type="text"
        size="mini"
        @click="() => add()">
        添加一级菜单
      </el-button>
    </div>
    <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="img">
          <el-input v-model="form.img"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input type="number" v-model="form.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "menuList",
  components: {},
  data() {
    return {
      defaultProps: {//对应字段名
        children: 'children',
        label: 'name'
      },
      data:[],//菜单数据
      dialogFormVisible:false,
      form:{//编辑表单
        name:'',
        url:'',
        img:'',
        sort:''
      },
      editType:0,// POST 新增  PUT 修改
      rules:{
        name:[
          { required: true, message: '请输入菜单名', trigger: 'blur' }
        ],
        sort:[
          { required: true, message: '请输入排序号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getList() {//获取菜单数据
      this.$http({
        url: "/v1/menuTree",
        method: "GET",
      }).then((res) => {
        //菜单数据赋值
        this.data = res
      })
    },
    resetForm(){
      //清空表单数据
      this.form = {
        name:'',
        url:'',
        img:'',
        sort:''
      }
    },
    add(data){
      //打开弹框
      this.dialogFormVisible = true
      //重置弹框表单数据
      this.resetForm()
      //设置表单提交类型
      this.editType = 'POST'
      //判断菜单层级 
      if(data){//二级菜单 data为对应一级菜单
        //设置提交内容
        this.form.parentId = data.id//设置父级菜单ID
        this.form.level = 2//设置层级
      }else{//一级菜单 data为空 
        this.form.parentId = 0//设置父级菜单ID
        this.form.level = 1//设置层级
      }
    },
    remove(data){
      //直接调用删除接口
      this.$http({
            url:'/v1/menu',
            method:'DELETE',
            params:{
              id:data.id
            }
          }).then(res => {
            if(!res.errorMsg){
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              //刷新数据
              this.getList()
            }
          })
    },
    edit(data){
      //打开表单弹框
      this.dialogFormVisible = true
      //重置表单
      this.resetForm()
      //设置编辑类型为PUT
      this.editType = 'PUT'
      //赋值
      this.form = data
    },
    submit(){
      //校验表单
      this.$refs.form.validate((valid) => {
        if (valid) {
          //调用接口
          this.$http({
            url:'/v1/menu',
            method:this.editType, // POST 新增   PUT修改
            data:this.form//表单数据
          }).then(res => {
            //关闭输入框
            this.dialogFormVisible = false
            //判断结果
            if(!res.errorMsg){
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              //刷新页面菜单数据
              this.getList()
            }
          })
        } else {
          return false;
        }
      })
    }
  },
  created() {
    //获取菜单
    this.getList()
  },
  mounted() {},
};
</script>

<style scoped>
  .menuList{
    margin:40px 24px;
    padding:30px 0px;
    background: #fff;
  }
</style>
